<template>
  <el-row class="tabs-list" type="flex" justify="space-between" align="middle">
    <div
      class="item"
      :class="{ active: index === current }"
      v-for="(item, index) in list"
      :key="index"
      @click="$emit('change', index)"
    >
      {{ item }}
    </div>
  </el-row>
</template>

<script>
export default {
  name: "Tabs",
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    current: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    change(val) {
      console.log(val);
    },
  },
};
</script>

<style lang="scss" scoped>
.tabs-list {
  height: 28px;
  background: rgba(9, 28, 57, 0.3);
  border-radius: 4px;
  border: 1px solid rgba(69, 98, 145, 0.29);

  .item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70px;
    height: 28px;
    font-size: 12px;
    font-weight: 400;
    color: #ffffff;
    line-height: 14px;
    cursor: pointer;
    &.active {
      background: #26457c;
      border-radius: 4px;
    }
  }
}
</style>
